<template>
	<view>
		<view class="loginType">
			<view class="logo"><text style="font-weight:bold">绽放</text><br></view>
			<button class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录/注册</button>
		</view>

		<view class="readAgreement">
			<checkbox style="transform: scale(0.7,0.7);" :value="agreement" :checked="agreement"
				@click="showAgreement" />
			我已阅读并同意 <text style="color:#4dd2ff" @click="UserAgreement"> 用户协议 </text> 和 <text style="color:#4dd2ff"
				@click="SecretAgreement"> 隐私政策 </text>
		</view>
		<view class="allIcon">
			<view class="iconBox">
				<image src="../static/indexad/sj.png" mode=""></image>
			</view>
			<view class="iconBox filter">
				<image src="../static/indexad/wx.png" mode=""></image>
			</view>
			<view class="iconBox filter">
				<image src="../static/indexad/zfb.png" mode=""></image>
			</view>
			<view class="iconBox filter">
				<image src="../static/indexad/dy.png" mode=""></image>
			</view>
		</view>

		<fui-bottom-popup :show="show" @close="closePopup">
			<view style="background-color:#FFF;height:400rpx;padding:50rpx;">
				<button v-if="avatarUrl == ''" class="noAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					上传<br>头像
				</button>
				<view v-else style="width:100rpx;height:100rpx;margin:auto;">
					<image :src="avatarUrl" style="width:100rpx;height:100rpx;border-radius:70rpx"
						open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></image>
				</view>
				<input class="nickName" v-model="SetNickName" @input="inputMark" maxlength="12" type="nickname"
					placeholder="给自己起个昵称吧!">
				<view style="padding:20rpx;">
					<button class="agreeBtn" @tap="getUser(authInfo)">同意授权并登录</button>
				</view>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				avatarUrl: '',
				countryCode: '',
				phoneNumber: '',
				SetNickName: '',
				avatar: '',
				agreement: false,
				authInfo: {}
			};
		},
		methods: {
			showAgreement() {
				this.agreement = !this.agreement

			},
			UserAgreement() {

				this.$common.goNavPage('/pages/content?cid=2')
			},
			SecretAgreement() {

				this.$common.goNavPage('/pages/content?cid=3')
			},
			onChooseAvatar(e) {
				// console.log(e)
				let avatarUrl = e.detail.avatarUrl

				uni.uploadFile({
					url: this.$imgUpload + 'headpic&type=image',
					filePath: avatarUrl,
					name: "file",
					formData: {},
					success: (uploadFileRes) => {
						// console.log('uploadFileRes', uploadFileRes);

						let ResData = JSON.parse(uploadFileRes.data);
						this.avatarUrl = this.$baseUrl + ResData.fileName
					}
				});

			},
			getPhoneNumber(e) {
				// console.log('getPhoneNumberAAAA', e)
				// console.log(e.detail.code)  // 动态令牌
				// console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				// console.log(e.detail.errno)  // 错误码（失败时返回）

				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					if (this.agreement) {
						this.weixinAuth();
					} else {
						uni.showToast({
							title: '请先阅读并同意用户协议和隐私政策！',
							icon: 'none'
						})
					}
					// this.$httpost('/Login/getPhoneNumber', {
					// 	"code": e.detail.code
					// }).then(res => {
					// 	if (res.code == 200) {
					// 		// console.log('PhoneNumber', res);
					// 		this.countryCode = res.data.phone_info.countryCode;
					// 		this.phoneNumber = res.data.phone_info.phoneNumber;

					// 		if (res.data.phone_info.userinfo != null) {
					// 			this.SetNickName = res.data.phone_info.userinfo.NickName;
					// 			this.avatarUrl = res.data.phone_info.userinfo.WxHeadPic;
					// 		}

					// 		// this.agreement = true;
					// 		if (this.agreement) {
					// 			this.weixinAuth();
					// 		} else {
					// 			uni.showToast({
					// 				title: '请先阅读并同意用户协议和隐私政策！',
					// 				icon: 'none'
					// 			})
					// 		}
					// 		// this.weixinAuth();
					// 	}
					// });
				} else {
					this.agreement = false;
				}
			},
			weixinAuth() {
				uni.login({
					provider: 'weixin',
					success: auth => {
						// console.log('auth', auth);
						this.authInfo = auth;
						this.openPopup();
					}
				});
			},
			openPopup() {
				this.show = true
			},
			getAvatar() {
				// console.log(app.globalData.userInfo)
			},
			getUserProfile(e) {
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						// console.log("获取用户信息成功", res)
					}
				})
			},

			inputMark(e) {
				console.log(e, '输入的内容');
				let emouji = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g
				let text = e.detail.value

				if (emouji.test(e.detail.value)) {
					uni.showToast({
						icon: 'none',
						title: '不可输入表情'
					});
					text = e.detail.value.replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g, '')
					console.log('禁止输入表情');
				}

				console.log('inputMark', text);

				this.$nextTick(() => {
					this.SetNickName = text
				})
			},
			getUser(auth) {
				console.log('this.nickName', this.SetNickName)
				const ylength = this.SetNickName.length
				const nickNamelength = this.SetNickName.replace(/[\u4e00-\u9fa5]/g, 'aa').length
				// console.log('this.nickName.length', this.nickName, ylength, nickNamelength)
				let emouji = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g
				if (emouji.test(this.SetNickName)) {
					uni.showToast({
						title: '昵称中不可包含表情',
						icon: 'none'
					})
					return false;
				}
				if (nickNamelength > 12) {
					uni.showToast({
						title: '昵称不能超过12个字符（中文6个字）',
						icon: 'none'
					})
					return false;
				}
				uni.showLoading({
					title: '正在登陆...'
				})

				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取您的昵称、头像',
					success: userRes => {
						// console.log('userRes', userRes);
						if (userRes.errMsg == 'getUserProfile:ok' && userRes.userInfo != undefined) {

							var userInfo = {
								code: auth.code,
								encryptedData: userRes.encryptedData,
								iv: userRes.iv
							};

							// 调用接口请求openid
							this.login(userInfo);

						} else {
							uni.showToast({
								icon: 'none',
								title: '获取失败，请重试'
							});
						}
					},
					fail: error => {
						// console.log('error', error)
					}
				});
			},
			// 授权成功，登录
			login(userInfo) {
				uni.showLoading({
					title: '登录成功'
				})
				uni.setStorageSync('isLogin', true)

				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/index'
						})
					},
				})


				// if (!this.SetNickName) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入昵称'
				// 	});
				// 	return false;
				// }

				// if (!this.avatarUrl) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传头像'
				// 	});

				// 	return false;
				// }

				// 			this.$httpost('/Login/weixinLogin', {
				// 				"code": userInfo.code,
				// 				"encryptedData": userInfo.encryptedData,
				// 				"iv": userInfo.iv,
				// 				"countryCode": this.countryCode,
				// 				"phoneNumber": this.phoneNumber,
				// 				"nickName": this.SetNickName,
				// 				"avatarUrl": this.avatarUrl,
				// 				"inviter": uni.getStorageSync("inviter")
				// 			}).then(resUserinfo => {
				// 				// console.log('WechatLogin', resUserinfo);

				// 				if (resUserinfo.code == 200) {
				// 					uni.hideLoading();
				// 					uni.setStorageSync("token", resUserinfo.data.token);
				// 					uni.setStorageSync("isLogin", resUserinfo.data.userInfo);

				// 					connectSocketInit(0, resUserinfo.data.userInfo.UserID)

				// 					if (resUserinfo.data.regcount == 1) {
				// 						// console.log("11111111111111")
				// 						this.$common.goNavPage('/myPages/pages/userBaseSet');
				// 					} else {

				// 						uni.navigateBack()
				// 					}


				// 				}
				// 			});
			},
		}
	}
</script>

<style lang="scss">
	.loginTop {
		padding: 30rpx;
	}

	.loginType {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		background-color: #FFDD00;
		color: #000;
		font-size: 50rpx;
		text-align: center;
		line-height: 60rpx;
		margin: 130rpx;
	}

	.loginBtn {
		width: 70vw;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FFDD00;
		color: #000;
		border-radius: 10rpx;
		text-align: center;
		font-size: 28rpx
	}

	.switchLogin {
		width: 500rpx;
		text-align: left;
		margin: 30rpx
	}

	.nickName {
		border: 1rpx solid #f0f0f0;
		border-raiuds: 50rpx;
		width: 50vw;
		height: 40rpx;
		margin: auto;
		margin-top: 40rpx;
		padding: 20rpx;
	}

	.readAgreement {
		margin-top: 20rpx;
		font-size: 28rpx;
		width: 100vw;
		text-align: center;
	}

	.noAvatar {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
		background: #f0f0f0;
		border: 0rpx;
		border-radius: 100rpx;
		font-size: 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		line-height: 20rpx;
	}

	.agreeBtn {
		width: 60vw;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #FFDD00;
		color: #000;
		border-radius: 10rpx;
		text-align: center;
		font-size: 28rpx
	}

	.allIcon {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		position: fixed;
		padding: 0rpx 20rpx;
		bottom: 100rpx;
	}

	.iconBox {
		width: 80rpx;
		height: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.filter {
		filter: grayscale(100%);
	}
</style>